<template>
    <div>
        <div v-for="user in userList" :key="user.Id">
            <span>{{user.Name}}</span>
            <span>{{user.Phone}}</span>
        </div>
    </div>
</template>
<script>
import { loadScript } from '../utils'
export default {
  name: 'MaxScreen',
  data() {
    return {
      userHub: '',
      chatId: '',
      userList: []
    }
  },
  mounted() {
    let _this = this
    let scripts = [
      {
        id: 'jquery',
        src: '/static/js/jquery.min.js'
      },
      {
        id: 'signalR',
        src: '/static/js/jquery.signalR.min.js'
      },
      {
        id: 'signalRhub',
        src: 'http://192.168.33.181:82/signalr/hubs'
      }
    ]
    loadScript(scripts).then(() => {
      let conn = $.connection.hub
      //conn.logging = true
      conn.url = 'http://192.168.33.181:82/signalr'
      conn.qs = { code: _this.$route.params.code } //`code=${_this.$route.params.code}`

      var userHub = $.connection.activityUser
      //添加用户
      userHub.client.addUser = function(user) {
        console.log(user)
        _this.userList.push(user)
      }
      conn.start().done(function() {
        //列表
        userHub.server.users().then(json => {
          console.log(json)
          _this.userList = json
        })
        _this.chatId = conn.id
      })
      this.userHub = userHub
    })
  }
}
</script>
